<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="list"></div>
</body>
<script>
    /* DOM性能
                                1.DOM操作非常‘昂贵’，避免频繁的DOM操作
                                2.对DOM查询做缓存
                                3.将频繁操作改为一次性操作

                                */
    let fragment = document.createDocumentFragment() // 创建一个文档片段对象
    for (let i = 0; i < 1000; i++) {
        let div = document.createElement('div') // 创建一个div元素
        div.innerHTML = i // 为div元素添加内容
        fragment.appendChild(div) // 将div元素添加到文档片段对象中
    }
    //统一插入到页面中
    document.querySelector('.list').appendChild(fragment) // 将文档片段对象添加到页面中
</script>

</html>